import React from 'react'
import {
  increment,
  decrement
} from "../../store/slice/countSlice"
import { useDispatch,useSelector } from 'react-redux'
import {setTimeoutAction} from "../../store/slice/countSlice"

/* 
  react-reducx提供了两个hook  用来操作redux
    -useDispatch()   得到一个dispatch方法
    -useSelector()  参数是一个回调函数,回调函数的形参就是store中的数据

*/



export default function Count() {
  // 推送数据  在redux.toolkit中只要推送状态上去  会自动更新状态  
  const dispatch=useDispatch();
  const count=useSelector(state=>state.count.count)
  const movieList=useSelector(state=>state.movie.movieList)

  const incrementHandle = () => {
    dispatch(increment(10))
  }

  const decreamentHandle = () => {
    dispatch(decrement(3))

  }

  const ifOddDecrementHandle = () => {
    if (count % 2 !== 0) {
      dispatch(increment(3))
    }

  }

  const waitDecrementHandle = () => {
 
    dispatch(setTimeoutAction())

  }

  return (
    <div>
      <h1>我是Count组件 我的值是{ count }</h1>
      <h2>当前电影的总条数是{movieList.length}</h2>
      <div>
        <button onClick={incrementHandle}>累加</button>
        <button onClick={decreamentHandle}>累减</button>
        <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
        <button onClick={waitDecrementHandle}>等2s再加1</button>
      </div>

    </div>
  )
}
